<template>
  <div id="home">
    <navbar class="home-nav">

      <div slot="center">购物街</div>


    </navbar>
    <scroll></scroll>
    <homecommend :recommends="recommends"></homecommend>
    <feature></feature>
    <tabbarcontrol  class="tab-control" :titles="['流行','新款','精选']"  @tabclick="cpnclick"></tabbarcontrol>
    <goodslist :goods="goods[currentType].list"></goodslist>
    <backtop></backtop>

    </div>
</template>

<script>

import homecommend from "./child/homerecommend.vue"
import feature from "./child/feature.vue"
import scroll from "./child/scrollview.vue"

import navbar from "../../components/common/navbar/navbar.vue"
import tabbarcontrol from "../../components/common/tabbarcontrol/tabbarcontrol.vue"

import goodslist from "../../components/content/goods/goodslist.vue"
import backtop from "../../components/content/backtop/backtop.vue"

import {gethomemultidata,
gethomegoods} from "../../network/home"

export default {
  name:'home',
  components:{
    navbar,
    homecommend,
    feature,
    scroll,
    tabbarcontrol,
    goodslist,
    backtop

  },
  data(){
    return{
// result:null
currentType:"pop",
banners:[],
recommends:[],
goods:{
  'pop':{page:0,list:[]},
  'new':{page:0,list:[]},
  'sell':{page:0,list:[]},
}

  }

  },
  created(){
    this.gethomemultidata();


    this.gethomegoods('pop')
    this.gethomegoods('new')
    this.gethomegoods('sell')



  },
  methods:{

    //获取网络数据
    gethomemultidata(){
       gethomemultidata().then(res => {
      // console.log(res);
      // this.result=res;
      this.banners=res.data.data.banner.list
      this.recommends=res.data.data.recommend.list;
    })
    },
    gethomegoods(type){
        const page=this.goods[type].page+1;
      gethomegoods(type,page).then(res =>{
      // console.log(res);
      this.goods[type].list.push(...res.data.data.list)
      this.goods[type].page+=1
    })
    },

    //监听点击事件
    cpnclick(index){
      // console.log(index)  
      switch(index){
        case 0:
          this.currentType='pop'
          break
          case 1:
            this.currentType='new'
            break
            case 2:
              this.currentType='sell'
      }
      // switch (index) {
      //   case 0:
      //     this.currentype='pop'
      //         break ;
      //   case 1:
      //     this.currentype='news' 
      //         break;
      //   case 2:
      //     this.currentype='sell'
      // }
    }


  }
}
</script>

<style scoped>

#home{
padding-top: 35px;
}


.home-nav{
  background-color: rgb(185, 125, 143);
  color: aliceblue;


  position: fixed;
  left: 0%;
  right: 0%;
  top: 0%;
  z-index: 9;

}

.tab-control{
  position: sticky;
  top: 44px;
  background-color: #fff;
  z-index: 9;
}


</style>
